import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import style from './index.module.scss'
import MyPageHeader from '@/components/MyPageHeader'
import AnimeDetailHeader from '../AnimeDetailHeader'
import Comments from '@/components/Comments'

const AnimeDetail: React.FC = () => {
    const [anime, setAnime] = useState(null);
    const { id } = useParams();
    const navigate = useNavigate();

    useEffect(() => {
        fetch(`/api/mikan/xinfan/fanListAllEp?id=${id}`)
            .then(response => response.json())
            .then(data => setAnime(data));
    }, [id]);

    if (!anime) {
        return <div>Loading...</div>;
    }
    // @ts-ignore
    let oneData = anime.data[0];
    //console.log(oneData);

    return (
        <article className={style.animeDetail}>
            <MyPageHeader>{oneData.fanName}</MyPageHeader>
            <section className={style.content}>
                <div className={style.headContent}>
                    <AnimeDetailHeader image={oneData.poster} />
                </div>
                <div className={style.detailContent}>
                    <h2 className={style.title}>{oneData.fanName}</h2>
                    <div className={style.episodes}>
                        {/*// @ts-ignore*/}
                        {anime.data.map((episode, index) => (
                            <button key={index} onClick={() => navigate(`/anime/play/${id}/${index + 1}`)} className={style.episodeButton}>
                                第{index + 1}集
                            </button>
                        ))}
                    </div>
                </div>
            </section>
            <Comments />
        </article>
    )
}

export default AnimeDetail